<!DOCTYPE html>
<html class="ui-page-login">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="__STATIC__/recharge/css/mui.min.css" rel="stylesheet" />
		<link href="__STATIC__/recharge/css/style.css" rel="stylesheet" />
		<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>

		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 40%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 58%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="/wap/member/index"><span style="font-size:30px;line-height: 45px;"><</span></a><h1 class="mui-title">支付表单</h1>
		</header>
		<div class="mui-content">
			<form id='login-form' class="mui-input-group" method="post" action="/money/recharge/docharge.html">
				<div class="mui-input-row">
					<label>订单金额(元)</label>
					<input id='money' name='money' type="text" class="mui-input-clear mui-input" placeholder="订单金额" value="100">
				</div>
				<div class="mui-input-row">
					<label>支付方式</label>
					<select id='charge_type' name="charge_type">
						<!--<option value="dspay">快捷支付</option>-->
						<option value="klpay">快捷支付</option>
						<!--<option value="hjpay">支付宝</option>-->
						<!--<option value="huanqiu">快捷支付</option>-->
						<!--<option value="lsjjh">网银支付</option>-->
						<option value="xfzhpay">快捷支付（新）</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>支付通道</label>
					<select id='bankCode' name="bankCode">
						<option value="320045">网关支付</option>
					</select>
				</div>
				<div id="extra">
				</div>
				<div class="mui-content-padded">
					<button type="submit" class="mui-btn mui-btn-block mui-btn-primary">确认支付</button>
				</div>
				</form>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
	</body>
	<script>
		$(document).ready(function(){
			var pay_type = {
				dspay:{
					chennl:[
						{key:"建设银行",name:"建设银行"},
						{key:"工商银行",name:"工商银行"},
						{key:"农业银行",name:"农业银行"},
						{key:"招商银行",name:"招商银行"},
						{key:"交通银行",name:"交通银行"},
						{key:"中国银行",name:"中国银行"},
						{key:"邮政储蓄",name:"邮政储蓄"},
						{key:"中信银行",name:"中信银行"},
						{key:"浦发银行",name:"浦发银行"},
						{key:"平安银行",name:"平安银行"},
						{key:"民生银行",name:"民生银行"},
						{key:"兴业银行",name:"兴业银行"},
					],
					extra:[
						{key:"bankcardid",name:"银行卡号"},
						{key:"bankfullname",name:"姓名"},
						{key:"bankidc",name:"身份证号"},
						{key:"bankmobile",name:"手机号"},
					],
				},
				lsjjh:{
					chennl:[
						{key:"320045",name:"网关支付"},
					],
					extra:[
						
					],
				},
				hjpay:{
					chennl:[
						{key:"0002",name:"支付宝扫码"},
					],
					extra:[
						
					],
				},

				klpay:{
					chennl:[
						//{key:"912",name:"支付宝H5"},
						//{key:"911",name:"支付宝扫码"},
						//{key:"913",name:"微信扫码"},
						//{key:"914",name:"微信H5"},
						//{key:"915",name:"银联快捷H5"},
						{key:"916",name:"网关支付"},
					],
					extra:[
						
					],
				},

				xfzhpay:{
					chennl:[
						//{key:"ICBC",name:"快捷支付"},
						{key:"ICBC",name:"工商银行"},
						{key:"CMBCHINA",name:"招商银行"},
						{key:"CCB",name:"建设银行"},
						{key:"BOCO",name:"交通银行"},
						{key:"CIB",name:"兴业银行"},
						{key:"CMBC",name:"中国民生银行"},
						{key:"CEB",name:"光大银行"},
						{key:"BOC",name:"中国银行"},
						{key:"PAB",name:"平安银行"},
						{key:"CNCB",name:"中信银行"},
						{key:"CGB",name:"广发银行"},
						{key:"SPDB",name:"上海浦东发展银行"},
						{key:"ABC",name:"中国农业银行"},
						{key:"PSBC",name:"中国邮政储蓄银行"},
						{key:"HXB",name:"华夏银行"},
					],
					extra:[
						
					],
				}
			}
			function chang_select(id){
				$("#bankCode").find("option").remove();
				if(typeof(id)=="string" && id!=null && id!="" && pay_type[id].chennl.length>0){
					$.each(pay_type[id].chennl,function(idx,val){
						$("#bankCode").append("<option value='"+val.key+"'>"+val.name+"</option>");
					});
					$("#bankCode").find("option").eq(0).prop("selected", true); 
				}
				$("#extra").html("");
				if(typeof(id)=="string" && id!=null && id!="" && pay_type[id].extra.length>0){
					$.each(pay_type[id].extra,function(idx,val){
						var html = "<div class=\"mui-input-row\"><label>"+val.name+"</label><input id='"+val.key+"' name='"+val.key+"' type=\"text\" class=\"mui-input-clear mui-input\" placeholder=\"\" value=\"\"></div>";
						$("#extra").append(html);
					});
				}
				
			}
			$("#charge_type").change(function(){
				var label_id=$(this).val();
				chang_select(label_id);
			});
			chang_select("klpay");
		});
	</script>

</html>